import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: root
    title: "高亮颜色"
    
    SystemPalette {
        id: systemPalette
        colorGroup: SystemPalette.Active
    }
    
    ScrollView {
        id: scrollView
        anchors.fill: parent
        contentWidth: availableWidth
        
        ColumnLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(parent.width - 40, 400)
            spacing: 20
            
            Item { height: 10 }
            
            Label {
                text: "高亮颜色展示"
                font.pixelSize: 18
                font.bold: true
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
            }
            
            // 高亮色示例
            Rectangle {
                Layout.fillWidth: true
                height: 80
                color: systemPalette.highlight
                
                Text {
                    anchors.centerIn: parent
                    text: "高亮颜色 (highlight): " + systemPalette.highlight + "\n" +
                          "高亮文本颜色 (highlightedText): " + systemPalette.highlightedText
                    color: systemPalette.highlightedText
                    horizontalAlignment: Text.AlignHCenter
                }
            }
            
            // 模拟选择的列表项目
            Rectangle {
                Layout.fillWidth: true
                height: 200
                color: systemPalette.base
                border.width: 1
                border.color: systemPalette.mid
                
                Column {
                    anchors.fill: parent
                    anchors.margins: 1
                    spacing: 0
                    
                    Repeater {
                        model: ["项目 1", "项目 2", "项目 3 (选中)", "项目 4", "项目 5"]
                        
                        Rectangle {
                            width: parent.width
                            height: 40
                            color: index === 2 ? systemPalette.highlight : 
                                   (index % 2 === 0 ? systemPalette.base : systemPalette.alternateBase)
                            
                            Text {
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: 10
                                text: modelData + (index === 2 ? 
                                    "\nhighlight: " + systemPalette.highlight + 
                                    ", highlightedText: " + systemPalette.highlightedText : "")
                                color: index === 2 ? systemPalette.highlightedText : systemPalette.text
                            }
                        }
                    }
                }
            }
            
            // 强调色
            Rectangle {
                Layout.fillWidth: true
                height: 80
                color: systemPalette.window
                
                Text {
                    anchors.centerIn: parent
                    text: "强调色 (accent): " + systemPalette.accent
                    color: systemPalette.accent
                    horizontalAlignment: Text.AlignHCenter
                }
            }
            
            Item { height: 20 }
        }
    }
} 
